<template>
  <div>
    <Header title="搜索"></Header>
    <van-tabs v-model="active">
      <van-tab v-for="(channel,index) in channels" :key="index" :title="channel.name">
        <ChannelContent :channel="channel"></ChannelContent>
      </van-tab>
      <!-- 站位最后一个 跟标签一样大 就不会挡住了 -->
        <div slot="nav-right" class="shak"></div>
        <!-- 汉堡标签 -->
      <div slot="nav-right" @click="show=true" class="wap-nav-wrap">
        <van-icon name="wap-nav"></van-icon>
      </div>
    </van-tabs>
    <van-popup
    class="popup"
     v-model="show"
     closeable
     position="bottom"
     get-container="body"
     ><ChannelEdit :channels="channels" @showPopu='show=false' @updataActive="updataActive" :active="active"></ChannelEdit></van-popup>
  </div>
</template>

<script>
import Header from '../../components/Header/Header.vue'
import {getUserChannels} from '../../api/user'
import ChannelContent from '../../components/ChannelContent/ChannelContent.vue'
import ChannelEdit from './ChannelEdit.vue'
import {mapState} from 'vuex'
export default {
  name: "Home",
  created() {},
  mounted() {
    this.getChannels()
  },
  data() {
    return {
      active: 0,
      channels: [],  //用户频道
      show: false // 弹出层显示
    };
  },
  props: {},
  methods: {
    async getChannels(){
      if(this.user){
        const {data}=await getUserChannels()
        // console.log(data);
        this.channels=data.data.channels
      }else{
        // 判断是否有缓存
        const localStorage= window.localStorage.getItem('channels')
        if(localStorage){
          this.channels=channels
        }else{
          // 用户没有登陆 也没有本地存储 获取推荐的列表
          const { data } = await getUserChannels()
          // console.log(data)
          this.channels = data.data.channels
        }
      }

    },
    updataActive(index){
      this.active = index
    },
    activated() {

    },
    deactivated() {

    },
  },
  components:{
    Header,
    ChannelContent,
    ChannelEdit
  },
  computed: {
    ...mapState(['user'])
  },
};
</script>

<style lang="less" scoped>
/deep/.van-tab{
  border-bottom: 1px solid #edeff3;
  border-right: 1px solid  #edeff3;
  font-size: 13px;
}
/deep/.van-tabs__line{
  background-color: #3296fa;
  width:15px
}
/deep/.wap-nav-wrap{
    position: fixed;
    right: 0;
    width: 33px;
    height: 44px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: .9;
    i{
      font-size: 22px;
    }
    /deep/&:before{
      content: '';
      border-left: 1px solid #edeff3;
      height: 44px;
      position: absolute;
      left: 0;
      top: 0;
      }
  }
  .shak{
    width: 24px;
    flex-shrink: 0;
  }
  .popup{
    height: 100%;
  }
</style>
